﻿@model IEnumerable<eBusiness.Models.Category>
<style type="text/css">
    .menu, .sub_menu { list-style: none; list-style-type: none; margin: 0; }
    .menu { padding: 0px 10px 0 10px;}
    .sub_menu { padding: 10px; }
    
    .menu_item { width: 200px; text-align: center; background: #00bfff; border-bottom: 1px solid #fff; }
    
    #MenuDiv { height: 40px; display: table; position: relative; }
    .menu_link { padding: 10px 20px; background: orange; position: relative; }
    .menu_item a { text-decoration: none; color: #fff; }
    .menu_link:hover { background: orangered; }
    .hidden { display: none; }
    .sub_menu_div { }
    .menu_link_active {background:orangered }
</style>
<script type="text/javascript">
    $(document).ready(function () {

        $(".menu_link").mouseover(function (e) {
            //e.preventDefault();
            $(".menu_link").removeClass("menu_link_active");
            $(this).addClass("menu_link_active");
            var offsetLeft = 0;
            var idSplit = e.target.id.split('_');
            var id = idSplit[2];
            var index = idSplit[1];
            var item = $(".menu_link");
            var offsetTop = $("#MenuDiv").outerHeight();

            for (var i = 0; i < index - 1; i++) {
                offsetLeft += $(item[i]).outerHeight() + 1;
            }

            offsetLeft = offsetTop - offsetLeft;

            $.ajax({
                url: '/Home/GetSubMenu/',
                type: "POST",
                dataType: 'html',
                data: '{"id" : "' + id + '"}',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    $("#sub_menu_div").html(data);
                    $("#SubMenuDiv").css('top', "-" + offsetLeft + "px");
                }
//                error: function () {
//                    alert("error");
//                }
            });

            //var offsetTop = $(this).outerWidth();
            //var a = $(this).left();

        });

        $("#main").mouseout(function (e) {
            $("#sub_menu_div").html("");
        });
    });
</script>
<div id="MenuDiv">
    <ul class="menu">
        @{
            var index = 1;
        }
        @foreach (var item in Model)
        {
            <li class="menu_item">
                @{
            var linkId = "MenuItemLink_" + index + "_" + item.ID;
            index++;
                }
                <a href="@Url.Action("Index", "Product", new { categoryId = item.ID,categoryName = item.Name.Replace(" ","-") })">
                    <div class="menu_link" id="@linkId">@item.Name</div>
                </a>@*<label class="hidden">@item.ID</label>
                @if (item.Childs.Count > 0)
                {
                    <ul class="sub_menu">
                        @foreach (var subItem in item.Childs)
                        {
                            <li class="sub_menu_item">@subItem.Name</li>
                        }
                    </ul>
                }*@ </li>    
        }
    </ul>
</div>
<div id="sub_menu_div">
</div>
